<template>
  <div style="height: 100%;width: 100%;" @click="closeTabBarFloatMenu">
    <el-scrollbar style="width: 100%;height: 100%;white-space: nowrap;">
      <el-tag
          type="primary"
          size="medium"
          title="首页"
          class="openTabs"
          :effect="menuActive === '/' ? 'dark' : 'light'"
          @click="menuActive === '/' ? '' :$router.push({path: '/'})"
      >
        首页
      </el-tag>
      <template v-if="opened && opened instanceof Array && opened.length">
        <el-tag
            v-for="tab in opened"
            :key="tab.id"
            type="primary"
            size="medium"
            class="openTabs"
            :closable="true"
            :effect="tab.path === menuActive ? 'dark' : 'light'"
            @click="handleTabClick(tab)"
            @close="handleTagClose(tab)"
            @contextmenu.native.prevent.stop="showFloatMenu($event, tab)"
        >
          {{tab.name}}
        </el-tag>
      </template>
    </el-scrollbar>
    <FloatMenu
        :menuWidth="110"
        :visible="tabBarFloatMenuVisible"
        :menus="menus"
        :x="clickProps.x"
        :y="clickProps.y"
    />
  </div>
</template>

<script>
import {mapActions, mapMutations, mapState} from "vuex";
import FloatMenu from "./FloatMenu";

export default {
  name: "TabBar",
  components: {FloatMenu},
  data() {
    return {
      menus: [
        {
          name: '关闭',
          callback: () => this.handleTagClose(this.clickProps.menu)
        }, {
          name: '关闭左边',
          callback: () => {
          }
        }, {
          name: '关闭右边',
          callback: () => {
          }
        }, {
          name: '关闭其他',
          callback: () => {
          }
        }
      ],
      clickProps: {
        visible: true,
        x: 0,
        y: 0,
        menu: null
      }
    }
  },
  methods: {
    ...mapMutations('home', ['openTabBarFloatMenu', 'closeTabBarFloatMenu']),
    ...mapActions('home', ['closeTabMenu', 'switchSideBarMenu']),
    handleTabClick(tab) {
      this.closeTabBarFloatMenu();
      this.switchSideBarMenu(tab);
    },
    handleTagClose(menu) {
      this.closeTabMenu(menu);
    },
    showFloatMenu(e, tab) {
      // TODO 计算菜单超出边界情况
      this.openTabBarFloatMenu();
      this.clickProps.x = e.clientX;
      this.clickProps.y = e.clientY;
      this.clickProps.menu = tab;
    }
  },
  computed: {
    ...mapState('home', ['menuActive', 'opened', 'tabBarFloatMenuVisible']),
  },
  created() {
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;


}

/deep/ .el-scrollbar__thumb {
  background-color: rgba(144, 147, 153, .7);
}

.openTabs {
  cursor: pointer;
  margin-right: 2px;
}
</style>